<template>
  <div class="w-[calc(100% - 120px)] p-[24px]">
    <div class="itembox" v-for="(item, index) in listValue" :key="index">
      <div class="flex flex-wrap items-baseline titlebox">
        <div class="shrink-0 text-[16px] tit">{{ item.cateName }}</div>
        <div class="text-[12px] text-[#999] ml-[5px] tips" v-if="item.cateNameTips">{{ item.cateNameTips }}</div>
      </div>
      <div class="mt-[10px] list">
        <div
          class="bg-[#fff] rounded-[4px] mt-[15px] cursor-pointer item"
          v-for="(subitem, subIndex) in item.list"
          :key="subIndex"
          @click="addComponent(props.componentType, subitem.type)"
        >
          <img :src="subitem.image" class="w-full h-auto object-cover" />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import imageType from '@/assets/site/image.webp';
import textType from '@/assets/site/text.webp';
import wechatBtn1 from '@/assets/site/wechatBtn_1.webp';
import wechatBtn2 from '@/assets/site/wechatBtn_2.webp';
import wechatBtn3 from '@/assets/site/wechatBtn_3.webp';

const props = defineProps<{
  componentType: string;
}>();

const emit = defineEmits(['selectComponent']);

const listValue = ref([]);

const initType = () => {
  if (props.componentType === 'image') {
    listValue.value = [
      {
        cateName: '单图',
        cateNameTips: '双击添加模块和图片',
        list: [
          {
            type: 'singleImage',
            image: imageType
          }
        ]
      }
    ];
  } else if (props.componentType === 'input') {
    listValue.value = [
      {
        cateName: '简单文本',
        cateNameTips: '',
        list: [
          {
            type: 'simpleText',
            image: textType
          }
        ]
      }
    ];
  } else if (props.componentType === 'wechatApplet') {
    listValue.value = [
      {
        cateName: '基本样式',
        cateNameTips: '',
        list: [
          {
            type: 'wechatBtn1',
            image: wechatBtn1
          },
          {
            type: 'wechatBtn2',
            image: wechatBtn2
          },
          {
            type: 'wechatBtn3',
            image: wechatBtn3
          }
        ]
      }
    ];
  }
};

const addComponent = (type: string, detailType: string) => {
  emit('selectComponent', { type, detailType });
};

watch(
  () => props.componentType,
  () => {
    if (props.componentType) {
      initType();
    }
  },
  { immediate: true }
);
</script>

<style lang="scss" scoped>
.list {
  .item {
    box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.1);
    transform: scale(1);
    -webkit-transform: scale(1);

    -webkit-transition: all 0.1s ease-in-out;
    transition: all 0.1s ease-in-out;
    &:hover {
      -webkit-transform: scale(1.05);
      transform: scale(1.05);
      -webkit-box-shadow: 0 4px 13px 0 rgba(0, 0, 0, 0.18);
      box-shadow: 0 4px 13px 0 rgba(0, 0, 0, 0.18);
    }
  }
}
</style>
